<template>
  <div>
    <van-nav-bar
  title="城市列表"
  left-arrow
  @click-left="$router.back()"
/>
<van-index-bar>
  <van-index-anchor index="A" />
  <van-cell title="文本" />
  <van-cell title="文本" />
  <van-cell title="文本" />

  <van-index-anchor index="B" />
  <van-cell title="文本" />
  <van-cell title="文本" />
  <van-cell title="文本" />
</van-index-bar>
<ul>
  <li v-for="item in CityList" :key="item.pinyin">{{item.label}}</li>
</ul>
  </div>
</template>

<script>
import { getCityList } from '@/api/Home'
export default {
  data () {
    return {
      CityList: []
    }
  },

  created () {
    this.getCityList()
  },

  methods: {
    async  getCityList () {
      try {
        const res = await getCityList()
        this.CityList = res.data.body
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>

<style scoped lang='less'>
.van-nav-bar{
  background-color: #21b97a;

  /deep/.van-nav-bar__title{
    font-size: 18px;
    color: #fff;
  }
  /deep/.van-icon-arrow-left{
    color: #fff;
  }
}
</style>
